<template>
    <div class="common examineeManage">
        <innerCommon :location="location">
            <div slot="left">
                <span>计划列表</span>
                <a-select @change="handleChange" :allowClear="true" placeholder="考试计划名称" style='width:250px;margin-right:10px'>
                    <a-select-option 
                        :value="item.id" 
                        v-for="(item,index) in professionList" 
                        :key="index">
                        {{item.name}}
                    </a-select-option>
                </a-select>
                <a-input-search class="inputStyle" placeholder="请输入考试名称"  v-model="searchValue" enter-button @search="onSearch" />
            </div>
            <div slot="right">
                <a-button type="primary" @click="openAdd()">新增</a-button>
            </div>
            <div slot="table">
                <topList
                    :topList="topList"
                    :currentItem="currentItem"
                    @changeTop="changeTop"
                ></topList>
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="examType" slot-scope="index,record">
                        <span v-if="record.examType==0">理论考试</span>  
                        <span v-else-if="record.examType==1">实操考试</span>  
                        <span v-else>理论+实操</span>
                    </div> 
                    <div slot="invigilatorConfirms" slot-scope="index,record">
                        <span v-if="record.invigilatorConfirms.length>0">
                            <a-tag v-for="(item,index) in record.invigilatorConfirms" :key="index">{{item.realname}}</a-tag>
                        </span>
                        <span v-else>无</span>    
                    </div> 
                    <div slot="creator" slot-scope="index,record">
                        {{record.creator.name}}
                    </div>
                    <div slot="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:orange">未审核</span>
                        <span v-else-if="record.status==1" style="color:green">已通过</span>
                        <span v-else style="color:red">已拒绝</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction" v-if="searchInfo.status==1">
                        <span @click="edit(record.id)">修改</span>
                        <confirmBox
                            @handleOk="deleteExaminee(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'考试'"
                        ></confirmBox>
                        <span @click="searchJoined(record.id)">报名查看</span>
                        <span @click="assignInvigilator(record.id)">分配监考员</span>
                        <span @click="downloadCert(record)">成绩查看</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction" v-else>
                        <span v-if="record.status!=1" @click="isPass(1,record.id)">通过</span>
                        <span v-if="record.status!=2" @click="isPass(2,record.id)">不通过</span>
                        <confirmBox
                            @handleOk="deleteExaminee(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'考试'"
                        ></confirmBox>
                        <span @click="toDetail(record.id)">查看</span>
                    </div>
                </a-table>
            </div>
        </innerCommon>
        <!-- 分配监考员 -->
        <invigilatorModal
            v-if="invigilatorModal"
            type="1"
            :invigilatorModal="invigilatorModal"
            @cancel="invigilatorModal=false"
            :examId="examId"
        ></invigilatorModal>
        <!-- 查看详情弹框 -->
        <detailModal
            class="examnationDetail"
            :dataList="dataList"
            :detailBox="detailBox"
            @cancel="detailBox=false"
            v-if='examInfo'
        >
            <div slot="examType">
                <a-tag>{{examInfo.profession.name}}</a-tag>
                <a-tag>{{examInfo.skill.name}}</a-tag>
                <a-tag v-if="examInfo.type==0">理论考试</a-tag>
                <a-tag v-else-if="examInfo.type==1">实操考试</a-tag>
                <a-tag v-else>理论+实操考试</a-tag>
            </div>
            <div slot="info">
                <div v-html="examInfo.info" class="ql-editor examDetail" style="border:1px solid #ddd;max-height:400px;overflow-y:scroll"></div>
            </div>
        </detailModal>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '考试名称',
        dataIndex: 'title',
    },{
        title: '考试类别',
        scopedSlots: { customRender: 'examType' },
    },{
        title: '报名时间',
        dataIndex: 'startTime',
    },{
        title: '考生容量',
        dataIndex: 'examineeAmount',
    },{
        title: '实际考生',
        dataIndex: 'examineeCount',
    },{
        title: '监考员',
        scopedSlots: { customRender: 'invigilatorConfirms' },
    },{
        title: '站点单位',
        scopedSlots: { customRender: 'creator' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]

import {
    getExamineeManageListApi,
    updateExamineeApi,
    deleteExamineeApi,
    getProfessionListApi,
    getExamineeDetailApi
} from "@/request/api"
import detailModal from '@/components/common/detailModal'
import innerCommon from '@/components/common/innerCommon'
import topList from '@/components/common/topList'
import confirmBox from '@/components/common/confirmBox'
import invigilatorModal from '@/components/common/invigilatorModal'
import moment from "moment"
export default {
    name:"examineeManage",
    components:{innerCommon,topList,confirmBox,invigilatorModal,detailModal},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.location=[
            {name:'1+X管理',path:''},{name:'考务管理',path:''}
        ]
        this.getToken(getProfessionListApi,{},res=>{
            this.professionList=res.data
        })
        this.init()
    },
    data(){
        return{
            list:[],
            columns,
            location:[],
            topList:[
                {
                    name:"已有考试计划",
                    id:1
                },{
                    name:'待审核考试计划',
                    id:0
                }
            ],
            currentItem:1,
            pagination:{total:0,pageSize:10,current:1},
            searchInfo:{
                keyword:'',
                page:1,
                pageSize:10,
                professionId:'',
                status:1
            },
            searchValue:'',
            professionList:[],
            invigilatorModal:false,
            allAssignInvigilatorList:[],
            examId:null,
            detailBox:false,
            dataList:[],
            examInfo:null,
        }
    },
    methods:{
        moment,
        init(){
            this.getToken(getExamineeManageListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({...item,'index':(this.searchInfo.page-1)*10+index+1}))
                this.pagination.total=res.data.count
            })
        },
        onSearch(data){
            this.searchInfo.keyword=data.trim()
            this.init()
        },
        changeTop(id){
            this.currentItem=id
            this.searchInfo.status=id
            if(id==1){//已有考试计划
                this.columns[6]={
                    title: '监考员',
                    scopedSlots: { customRender: 'invigilatorConfirms' },
                }
                this.columns[7]={
                    title: '站点单位',
                    scopedSlots: { customRender: 'creator' },
                }
            }else{//待审核考试计划
                this.columns[6]={
                    title: '申请站点',
                    scopedSlots: { customRender: 'creator' },
                }
                this.columns[7]={
                    title: '审核状态',
                    scopedSlots: { customRender: 'status' },
                }
            }
            this.init()
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        handleChange(data){
            this.searchInfo.professionId=data
            this.init()
        },
        openAdd(){
            this.$router.push({path:'/examinationAdd'})
        },
        // 修改
        edit(data){
            this.$router.push({path:'/examinationAdd',query:{data}})
        },
        // 删除考试
        deleteExaminee(data){
            this.getToken(deleteExamineeApi,{'examId':data},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        // 查看报名
        searchJoined(id){
            this.$router.push({path:'/viewSign',query:{examId:id}})
        },
        // 分配监考员
        assignInvigilator(data){
            this.examId=data
            this.invigilatorModal=true
        },
        // 成绩导入
        downloadCert(data){
            this.$router.push({path:"/examineeRecord",query:{'id':data.id,'type':data.type}})
        },
        // 通过/不通过
        isPass(type,id){
            this.getToken(updateExamineeApi,{'examId':id,'status':type},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        toDetail(id){
            this.getToken(getExamineeDetailApi,{examId:id},res=>{
                let info=res.data
                this.detailBox=true
                this.examInfo=res.data
                this.dataList=[
                    {
                        'name':'考试名称',
                        'info':info.title
                    },{
                        'name':'考试时间',
                        'info':info.activityStart+' 至 '+info.activityEnd
                    },{
                        'name':'报名时间',
                        'info':info.startTime+' 至 '+info.endTime
                    },{
                        'name':'考试类别',
                        'scopedSlots':{"customRender":'examType'}
                    },{
                        'name':'考试设备',
                        'info':info.device
                    },{
                        'name':'设备型号',
                        'info':info.deviceType
                    },{
                        'name':'考生容量',
                        'info':info.examineeAmount
                    },{
                        'name':'考试介绍',
                        'scopedSlots':{"customRender":'info'}
                    }
                ]
            })
        }
    }
}
</script>
// <style lang="stylus">
// .examnationDetail{
//     .examDetail{
//         border:1px solid #ddd;
//         max-height:400px;
//         overflow-y:scroll;
//     }
// }
// </style>